<template>
  <div class="main"></div>
</template>

<script>
export default {
  name: "StretchLineChart",
  mounted() {
    let myEcharts = this.$echarts.init(document.querySelector(".main"));
    let symbolSize = 20;
    let data = [[40, -10], [-30, -5], [-76.5, 20], [-63.5, 40], [-22.1, 50]];

    let option = {
      title: {
        text: 'Try Dragging these Points',
        left: 'center'
      },
      // 提示框组件
      tooltip:{
        // 提示框触发的条件，可选：
        // 不在 'mousemove' 或 'click' 时触发，
        // 用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。
        // 也可以通过 axisPointer.handle 来触发或隐藏。
        triggerOn: 'none',
        formatter: function (params) {
          return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
        }
      },
      // 直角坐标系内绘图网格
      grid: {
        // 组件离容器上侧的距离。
        top: '8%',
        // 组件离容器下侧的距离。
        bottom: '12%',
      },
      //  直角坐标系 grid 中的 x 轴
      xAxis: {
        min: -100,
        max: 70,
        // 坐标轴类型。 'value' 数值轴，适用于连续数据。
        type: 'value',
        //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
        axisLine: {onZero: false}
      },
      // //  直角坐标系 grid 中的 y 轴
      yAxis: {
        min: -30,
        max: 60,
        type: 'value',
        axisLine: {onZero: false}
      },
      //用于区域缩放，从而能自由关注细节的数据信息
      dataZoom: [
        {
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'none'
        },
        {
          type: 'slider',
          yAxisIndex: 0,
          filterMode: 'none'
        },
        {
          type: 'inside',
          xAxisIndex: 0,
          filterMode: 'none'
        },
        {
          type: 'inside',
          yAxisIndex: 0,
          filterMode: 'none'
        }
      ],
      // 系列列表。每个系列通过 type 决定自己的图表类型
      series: [
        {
          // 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
          id: 'a',
          type: 'line',
          // 是否平滑曲线显示。
          smooth: true,
          // 记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
          symbolSize: symbolSize,
          data: data
        }
      ]
    }
    setTimeout(function () {
      // Add shadow circles (which is not visible) to enable drag.
      myEcharts.setOption({
        graphic: data.map(function (item, dataIndex) {
          return {
            type: 'circle',
            position: myEcharts.convertToPixel('grid', item),
            shape: {
              cx: 0,
              cy: 0,
              r: symbolSize / 2
            },
            invisible: true,
            draggable: true,
            ondrag: function () {
              onPointDragging(dataIndex, [this.x, this.y]);
            },
            onmousemove: function () {
              showTooltip(dataIndex);
            },
            onmouseout: function () {
              hideTooltip();
            },
            z: 100
          };
        })
      });
    }, 0);

    window.addEventListener('resize', updatePosition);

    myEcharts.on('dataZoom', updatePosition);

    function updatePosition() {
      myEcharts.setOption({
        graphic: data.map(function (item) {
          return {
            position: myEcharts.convertToPixel('grid', item)
          };
        })
      });
    }

    function showTooltip(dataIndex) {
      myEcharts.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex
      });
    }

    function hideTooltip() {
      myEcharts.dispatchAction({
        type: 'hideTip'
      });
    }

    function onPointDragging(dataIndex, pos) {
      data[dataIndex] = myEcharts.convertFromPixel('grid', pos);

      // Update data
      myEcharts.setOption({
        series: [{
          id: 'a',
          data: data
        }]
      });
    }
    myEcharts.setOption(option);
  }
}
</script>

<style scoped>
.main {
  width: 1000px;
  height: 1000px;
  margin: 0px auto;
}
</style>
